<template>
	<view class="page">
		<view style="height: 120rpx;"></view>
		<view class="pic-box">
			<image style="width: 360rpx;height: 360rpx;border-radius: 50%;margin: 60rpx;" :src="meditation.icon_url"></image>
		</view>
		<view class="train-name">{{meditation.title}}</view>
		<view style="position: fixed;bottom: 0;width: 750rpx;display: flex;flex-direction: column;align-items: center;">
			<view style="width: 680rpx;">
				<u-slider :disabled="true" v-model="value" :min="0" :max="maxLen"></u-slider>
			</view>
			<view style="margin-top: 30rpx;margin-bottom: 50rpx;">{{nowTime}}/{{allTimeStr}}</view>
			<view style="height: 50rpx;"></view>
			<view style="width: 710rpx;">
				<u-button @click="finsh" type="primary" text="结束练习"></u-button>
				<view @click="toBack" style="line-height: 70rpx;color: #ccc;text-align: center;">暂时退出</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed:{
			...mapState(['member'])
		},
		data() {
			return {
				isEnd:false,
				isplay:false,
				maxLen:100,
				value:0,
				audioUrl:"",
				meditation:{
					title:"自由练习",
					icon_url:"https://baxztech.com/bian_admin_api/public/bianmp/card4.png"
				},
				allTime: '60:00',
				press: 0,
				nowTime: "0:00",
				startTime: '',
				endTime: '',
				allTimeStr:"60:00",
				palyer:null,
				timer:null,
				historeTime:'',
			}
		},
		onLoad(opt) {
			let nt = new Date().getTime();
			let ft = uni.getStorageSync('freedomTime') || '';
			this.startTime = ft;
			console.log(ft);
			if(ft && (nt-ft)<3600000){
				console.log("存在历史记录");
				this.historeTime = ft;
				this.startTime = ft;
			}else{
				uni.removeStorageSync('freedomTime')
			}
			this.startFreedom();
		},
		onShow() {
		},
		methods: {
			toBack(){
				uni.navigateBack()
			},
			addTrain(){
				let type = 'train';
				let start_time = parseInt(this.startTime/1000)
				let end_time = parseInt(this.endTime/1000)
				uni.$u.http.post('/client/add_train',{phone:this.member.phone,imei:this.member.imei,start_time,end_time,type,name:this.meditation.title}).then(res=>{
					if(res.status == 200){
						uni.removeStorageSync('freedomTime')
						uni.redirectTo({
							url:'/pagesA/pages/testMain/testReport?new=1&id='+res.data.trainData[0].id
						})
					}
				})
			},
			startFreedom(){
				if(!this.startTime){
					this.startTime = new Date().getTime()
				}
				uni.setStorageSync('freedomTime',this.startTime)
				this.timer = setInterval(()=>{
					let dt = new Date().getTime()-this.startTime
					this.nowTime = this.times(dt/1000)
					this.value = dt*100/3600000;
					if(dt>=3600000){
						this.endTime = new Date().getTime();
						clearInterval(this.timer);
						this.addTrain();
					}
				},1000)
			},
			finsh(){
				uni.showModal({
					title:"确认结束练习",
					content:"是否确认结束练习？结束后将生成训练结果报告",
					confirmText:"确认结束",
					success:(e)=> {
						this.endTime = new Date().getTime();
						this.addTrain();
					}
				})
			},
			times(totalSeconds){
				if(isNaN(totalSeconds)){
					return '0:00'
				}
				const minutes = Math.floor(parseInt(totalSeconds) / 60);
				const seconds = parseInt(totalSeconds) % 60;
				function padTo2Digits(num) {
				  return num.toString().padStart(2, '0');
				}
				const result = `${padTo2Digits(minutes)}:${padTo2Digits(seconds)}`;
				return result;
			}
		}
	}
</script>

<style>
	.page{
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		align-items: center;
	}
	.palyIcon{
		width: 120rpx;
		height: 120rpx;
	}
	.pic-box{
		width: 480rpx;
		height: 480rpx;
		margin: 0 auto 30px;
		border-radius: 50%;
		background-image: linear-gradient(to right bottom,#262324,#797879);
	}
	.train-name{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #2e2e2e;
		font-weight: 700;
		font-size: 48rpx;
		padding-bottom: 120rpx;
	}
</style>
